<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直播列表</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="nav clearfix">
        <a href="#face" class="active" data-toggle="tab"><i class="ico ico-face"></i>颜值</a>
        <a href="#game" data-toggle="tab"><i class="ico ico-game"></i>游戏</a>
    </div>
    <div class="list clearfix">
        <div id="face" class="active">
            <ul class="clearfix">
            </ul>
            <div class="infinite-scroll">
                <div class="infinite-preloader"></div>
                正在载入中...
            </div>
        </div>
        <div id="game">
            <ul class="clearfix">
            </ul>
            <div class="infinite-scroll">
                <div class="infinite-preloader"></div>
                正在载入中...
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/template.js"></script>
    <script src="../src/back-scroll.js"></script>
    <script id="list_template" type="text/html">
        {{each list as value i}}
        <li>
            <a href="{{value.url}}">
                <div class="head" style="background-image:url({{value.image}})">
                    <p class="font-white one-line">
                        {{value.author}}
                        <span><i class="ico ico-people"></i>{{value.number}}</span>
                    </p>
                </div>
                <div class="title">
                    {{if value.title}}
                    <h4 class="one-line">{{value.title}}</h4>
                    {{/if}}
                    <p><span class="font-A09FA0">来自 </span><i class="ico ico-logo {{value.webname}}"></i></p>
                </div>
            </a>
        </li>
        {{/each}}
    </script>
    <script>
        function array_where(arr,value){
            var result;
            $.each(arr,function(i,val){
                if(val == value){
                    result = i;
                }
            })
            return result;
        }

        $('#face').backScroll({
            container: 'ul',
            action: '/get_face/',
            data:{cid: 1},
            contentLoad: createTemplate,
            overLoad: function(data){
                if(data.pagetotal <= data.page){
                    $('#face').find('.infinite-scroll').html('节目已经全部加载完');
                    return true;
                }else{
                    return false;
                }
            }
        });
        $('#game').backScroll({
            container: 'ul',
            action: '/get_game/',
            data:{cid: 2},
            contentLoad: createTemplate,
            overLoad: function(data){
                if(data.pagetotal <= data.page){
                    $('#game').find('.infinite-scroll').html('节目已经全部加载完');
                    return true;
                }else{
                    return false;
                }
            }
        });
        $('#face').backScroll('firstload');
        $('#game').backScroll('stop');
        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            var $brother = $(e.target).siblings();
            $brother.removeClass('active');
            $(e.target).addClass('active');
            $brother.each(function(){
                var id = $(this).attr('href');
                $(id).backScroll('stop');
            })
            var id = $(e.target).attr('href');
            $(id).backScroll();
            $(id).backScroll('firstload');
//                wechatBack.click(id.replace(/#/,''));
        });
        function createTemplate(data){
            var map = {
                huya: "虎牙",
                huajiao: "花椒",
                longzu: "龙珠",
                meipai: "美拍",
                xiongmao: "熊猫TV",
                douyu: "斗鱼",
                zhanqi: "战旗TV"
            }
            if(data.pagetotal != 0){
                for(var i in data.list){
                    data.list[i].webname = array_where(map,data.list[i].webname);
                }
                var html = template('list_template', data);
                return html;
            }else{
                return '<div class="no-data">暂无节目</div>'
            }
        }
    </script>
</body>
</html>
